<template>
  <div>
    <el-card>
      <el-form :model="queryParams" ref="queryForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="queryParams.actorUsername" placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作人类型">
              <el-select v-model="queryParams.actorType" placeholder="请选择操作人类型">
                <el-option label="用户" value="0"></el-option>
                <el-option label="管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="登录状态">
              <el-select v-model="queryParams.status" placeholder="请选择登录状态">
                <el-option label="失败" value="0"></el-option>
                <el-option label="成功" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex;justify-content: center;align-items: center;height: 100%;">
            <el-button type="primary" @click="fetchLoginLogs">查询登录</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="loginLogs.list" style="width: 100%">
        <el-table-column prop="actorType" label="操作人类型"></el-table-column>
        <el-table-column prop="actorUsername" label="操作人用户名"></el-table-column>
        <el-table-column prop="ip" label="IP地址"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="userAgent" label="用户代理"></el-table-column>
        <el-table-column prop="status" label="登录状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">失败</span>
            <span v-else>成功</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="queryParams.size"
        layout="total, prev, pager, next"
        :total="loginLogs.total"
      ></el-pagination>

    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      queryParams: {
        page: 3,
        size: 10,
        actorType: '', // 操作人类型；0-用户；1-管理员
        actorUsername: '', // 操作人用户名
        status: '' // 登录状态；0-失败；1-成功
      },
      loginLogs: {
        total: 0,
        list: []
      }
    }
  },

  mounted () {
    // 一进入就直接展示
    this.fetchLoginLogs()
  },

  methods: {

    // 请求数据
    async fetchLoginLogs () {
      try {
        await axios.get('http://localhost:8080/pixington/system/log/login-log/page?page=1&size=10&actorType=0&actorUsername=lzy&status=0', {
          page: this.queryParams.page,
          size: this.queryParams.size,
          actorType: this.queryParams.actorType,
          actorUsername: this.queryParams.actorUsername,
          status: this.queryParams.status
        })
          .then(response => {
            if (response.code === 0) {
              this.loginLogs = response.data
            } else {
              // 处理错误
              console.error(response.msg)
            }
          }).catch(error => {
            // 处理网络错误等异常情况
            console.error(error)
          })
      } catch (err) {
        console.log(err)
      }
    },

    // 切换请求数据
    handleCurrentChange (val) {
      // 这里的val是页码
      // console.log(val, '1')
      this.currentPage = val
      this.fetchLoginLogs()
    }
  }

}
</script>

<style>

</style>
